<template>
  <div>
    <div class="banner">
      <router-link to="/" tag="span" class="iconfont back_icon">&#xe720;</router-link>
      <img src="//img1.qunarzz.com/sight/p0/1712/18/18b8d3d36d30c17da3.img.jpg_600x330_b9c9f9f4.jpg" @click="showGallery" class="banner_img">
      <div class="banner_Info">
        <div class="img_banner_number">
          <span class="iconfont icon_img">&#xe67b;</span>
          <em>1</em>
        </div>
        <div class="banner_title">武汉极乐汤金银潭温泉馆</div>
      </div>
    </div>
    <common-gallary :imgs="imgs" v-show="showgallery" @close='changegallery'></common-gallary>
  </div>
</template>

<script>
import CommonGallary from 'common/gallery/Gallery'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallary
  },
  data () {
    return {
      imgs: ['http://img1.qunarzz.com/sight/p0/1603/b4/b46beb878de0804a90.img.jpg_r_800x800_ff224bd2.jpg',
        'http://img1.qunarzz.com/sight/p0/1712/f8/f862ebb16383118da3.img.jpg_r_800x800_70c27a4a.jpg'],
      showgallery: false
    }
  },
  methods: {
    showGallery () {
      this.showgallery = true
    },
    changegallery () {
      this.showgallery = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    height 0
    padding-bottom 55%
    overflow hidden
    position relative
    .back_icon
      background rgba(0,0,0,0.5)
      border-radius 50%
      position absolute
      top .1rem
      left .1rem
      text-align center
      width .72rem
      height .72rem
      display block
      line-height .72rem
      color #fff
      font-size 0.52rem
    .banner_img
      width 100%
    .banner_Info
      position absolute
      bottom 0
      left 0
      right 0
      padding 0 0 .3rem .2rem
      background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.4))
      color #fff
      .banner_title
        font-size .36rem
        line-height .4rem
      .img_banner_number
        background rgba(0,0,0,0.5)
        display inline-block
        padding .06rem .35rem
        border-radius .2rem
        margin-bottom .15rem
        .icon_img
          font-size .24rem

</style>
